<template>
	<view class="list" v-if="$_columns.length">
		<template v-for="(i, key) in $_columns">
			<view class="item" :style="Object.assign({ width: `${100 / row}%` }, i.style)" :key="key" v-if="$_item_show[i.key] && !i.hide">
				<slot :name="i.slot" :row="i" :value="$_value[i.key]">
					<view class="row" v-if="!i.render">
						<text class="lable" :style="{ color: i.color }">{{ i.name || i.lable }}</text>
						<view class="value" :style="{ flex: i.block ? 'auto' : '1', color: i.color }">
							{{ $_value[i.key] }}{{ i.unit }}
						</view>
					</view>
				</slot>
				<view class="row" v-if="i.render">
					<text class="lable" :style="{ color: i.color }" v-if="i.lable">{{ i.lable }}</text>
					<Expand :style="{ flex: i.block ? 'auto' : '1', marginTop: i.block ? '.4em' : 0, color: i.color }" :row="i" :value="$_value[i.key]"
					 :render="i.render"></Expand>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import Expand from './expand.js';
	export default {
		components: {
			Expand
		},
		props: {
			value: {
				type: Object,
				default () {
					return {};
				}
			},
			columns: {
				type: Array,
				default () {
					return [];
				}
			},
			row: {
				type: Number,
				default: 2
			}
		},
		computed: {
			$_value() {
				let o = { ...(this.value || {})
				};
				this.$_columns.map(x => {
					typeof x.init === 'function' && x.init(o, x);
					typeof x.lable === 'function' && x.lable(o, x);
				});
				return o;
			},
			$_columns() {
				if (Array.isArray(this.columns)) {
					return this.columns;
				} else if (this.columns instanceof Object) {
					return Object.keys(this.columns).map(key => {
						const x = this.columns[key] || {};
						x.key = key;
						return x;
					});
				}
				return [];
			},
			$_item_show() {
				let o = {};
				for (let i in this.$_value) {
					const val = this.$_value[i] + '';
					o[i] = !!val && val !== 'undefined' && val !== 'null' && val !== 'NaN';
				}
				return o;
			}
		}
	};
</script>

<style lang="scss">
	.list {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		font-size: 13px;

		.item {
			box-sizing: border-box;
			line-height: 1.2em;
			font-size: inherit;
			width: 50%;

			&:nth-child(even) {
				// justify-content: flex-end;
			}

			.row {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: inherit;
				white-space: inherit;

				.lable,
				.value {
					padding: 3px 0;
					font-size: 14px;
				}

				.lable {
					color: #878787;
					white-space: nowrap;
					margin-right: .1em;
					padding: 3px 0;
				}

				.value {
					flex: 1;
					display: inline-block;
					white-space: inherit;
					color: #1c1c1c;
					word-wrap: break-word;
					word-break: break-all;
				}
			}
		}
	}
</style>
